<template>
  <h1>El-表格组件</h1>
  <el-table :data="data" style="width: 600px;margin: 0 auto">
    <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column prop="job" label="职业"></el-table-column>
    <el-table-column label="操作">
<!--      #default 定义了一个插槽 名为 default
          scope就是一个对象，该对象就是一个范围对象，可保存上下文数据-->
      <template #default="scope">
<!--        scope 保存了当前数据的索引$index（从 0 开始）与当前的完整对象 scope.row-->
        <el-button type="danger" @click="handleDelete(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup>
  import {ref} from "vue";

  const data = ref([
    {name:'张三', age:'11',job:'饲养员'},
    {name:'李四', age:'112',job:'护林员'},
    {name:'王五', age:'12',job:'保洁员'},
    {name:'赵六', age:'43',job:'销售员'}
  ])
  const handleDelete = (index) => {
    if(confirm('确认删除吗')) data.value.splice(index,1);
  }
</script>


<style scoped>

</style>